<template>
  <div class="my-comments">
    <div class="infinite-list-wrapper-container">
      <div style="overflow:auto;max-height:500px;">
        <div v-for="item in commentsInfo" :key="item.id" class="comments-container">
          <div class="user-info">
            <div class="avatar-container">
              <img
                :class="item.avatar?'':'default'"
                :src="item.avatar|| require('../assets/imgs/avatar_default.png')"
              />
            </div>
            <p class="name" v-text="item.questionUserName"></p>
          </div>
          <div class="content-info">
            <pre v-html="item.questionContent"></pre>
            <div class="date" v-text="item.createTime"></div>
          </div>
        </div>
        <p v-if="!commentsInfo.length">{{NO_DATA}}</p>
      </div>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MyComments',
  props: {
    commentsInfo: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    noMore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  }
}
</script>
<style lang="less">
.my-comments {
  .comments-container {
    .user-info {
      text-align: center;

      .avatar-container {
        display: flex;
        width: 58px;
        height: 58px;
        border-radius: 29px;
        background-color: #f1f1f1;
        justify-content: center;
        align-items: center;
      }
      img {
        display: flex;
        width: 100%;
        height: 100%;
      }
      img.default {
        width: 22px;
        height: 26px;
      }

      .name {
        margin-top: 10px;
        font-size: 14px;
        color: #333333;
      }
    }

    .content-info {
      flex: 1;
      background: url(../assets/imgs/comments_bg.png) no-repeat;
      background-size: 100% 100%;
      padding: 19px 17px 19px 37px;
      font-size: 14px;

      .date {
        text-align: right;
        color: #999999;
      }
    }
  }

  .infinite-list-wrapper-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    p {
      text-align: center;
    }
  }
}
</style>